<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" media="screen">
        .haha {
            position: absolute;
            top: 50%;
            /*left: 50%;*/
            tranform: translate(-50%, 50%);
        }

        /*#title{
            font-size: 100px;
        }*/
        .left {
            position: absolute;
            left: 10px;
        }

        .right {
            position: absolute;
            right: 10px;
        }
        body{
            height:2000px;
        }
    </style>
</head>
<body>
<!--innerHTML 内部超文本协议-->
<h1 onclick="taozou(this)" class="left"></h1>
<div id="zzz"></div>

<script type="text/javascript">
    var num = 0;
    //parseInt ,parseFloat,数据类型转换

    //应用程序有三个要素：数据处理，输出与输入
    //一个程序的主要区域就是操作内存

    //输出：document.write();
             //console(e).log;(调试时可以用)
            //alert("我的javascript");弹一个消息框出来   alert(JSON.stringify....)
    //setTimeout(,);  延迟事件

    function taozou(a) {
        //判断当前这个东西在哪里，
        console.log(a);//这个，自己
        if (a.classList.contains('left'))
        {
            a.classList.remove('left');
            a.classList.add('right');
        } else
        {
            a.classList.remove('right');
            a.classList.add('left');
        }
        // 如果在左边 ，我就让他到右边；否则我就让他去左边


    }
    /*document.onscroll=function(e){
       /!* debugger;*!/
        e.stopPropagation();
        alert("弹框");
    }*/
    setInterval(function () {
        var dd = document.querySelector("h1");
        //querySelector(" ")返回文档中匹配指定 CSS 选择器的一个元素
        if (num++ % 2 == 0) {
            dd.innerHTML = "遥看瀑布挂前川";
            dd.style.color = 'red';
        } else {
            dd.innerHTML = "李白的诗真好";
            dd.style.color = 'black';
        }
        if (num == 5) {
            dd.classList.add('haha');//添加class选择器*!/
        }
    }, 2000);

    /*var aa=document.querySelector('h1');
     aa.id='title'*/
    //1、做一个广告：在页面的左边上下飘动，每五秒走一次，该广告上有一个关闭按钮，但是点击该按钮时又会移到右边。
    //typeof :numben,string,boolean,undefined,null(空的指针) 基本数据类型
        //数据的处理——运算：
            // 数学书运算:+，-，*，/,%
            //逻辑运算: &&,||,!
            //关系运算:<,>,<=,>=,==
            //赋值运算符:=,+=,-=,*=,/=,%=,++,--

    //2、商场打折：满200减10元，并且全场75折，买了350元的商品，最后应该支付多少钱，
    //3、做一个表格（账单）
        //商品名        数量   单价  总价
        /*乔丹牌篮球鞋——998/双
        黑人牌牙膏  5支，20元/支，总价___元
        金骏眉顶级茶叶  1.25两，328/两，总价__元*/
</script>
</body>
</html>